<template>
	<view>
		<view class="px-30 bg-white">
			<template v-for="(item,index) in collectionList">
				<view @click="onClickItem(item.shopInfo)" class="p-20 flex bg-white">
					<u-image width="160" height="160" :src="$ut.setImgae(item.shopInfo.image)" border-radius="20"
						mode="aspectFill"></u-image>
					<view class="flex-1 ml-30 flex flex-column">
						<view class="flex-1">
							<view class="font-bold">{{ item.shopInfo.name }}</view>
							<view class="text-gray font-24">{{ item.shopInfo.notice }}</view>
							<view class="text-gray font-24">配送时间:{{ item.shopInfo.tradeBeginHour }}-{{ item.shopInfo.tradeEndHour }}
							</view>
						</view>
						<view @click.stop="remove(item.shopInfo,index)" class="text-right text-gray font-25"><text>取消收藏</text>
						</view>
					</view>
				</view>
			</template>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				collectionList: [],
				params: {
					page: 0,
					page_size: 30,
				},
				loading: false,
				loadMore: true
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			status() {
				if (this.loadMore == false) {
					return "noMore";
				} else if (this.loading) {
					return "loading";
				} else {
					return "more";
				}
			}
		},
		onLoad() {
			if(this.hasLogin){
				this.getShopCollect()
			}else{
				this.$ut.emptyToken();
			}
		},
		onReachBottom() {
			this.getShopCollect();
		},
		methods: {
			getShopCollect() {
				if (this.loading || !this.loadMore) {
					return false;
				} else {
					this.loading = true;
					this.page += 1;
					this.$u.api.getShopCollect({
							page: this.page,
							limit: 10,
							userId: this.userInfo.id
						}).then(res => {
							console.log(res);
							const {
								dataList,
								total
							} = res;
							this.collectionList = this.collectionList.concat(dataList);
							if (total <= this.collectionList.length) this.loadMore = false;
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
							this.page -= 1;
						});
				}
			},
			onClickItem(shopInfo) {
				const {
					id
				} = shopInfo
				this.$ut.route('/pages/store/index',{id});
			},
			remove(shopInfo, index) {
				uni.showLoading({
					title: '取消收藏中...'
				})
				const {
					id
				} = shopInfo
				// 执行删除
				this.$u.api.deleteShopCollect({
					userId: this.userInfo.id,
					shopId: shopInfo.id
				}).then(res=>{
					uni.hideLoading();
					this.collectionList.splice(index, 1)
					uni.showToast({
						title: '取消收藏成功'
					})
				})
			}
		}
	}
</script>

<style>

</style>